<!--支付接口选择框-->
<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      @register="register"
      :title="modalTitle"
      width="1000px"
      wrapClassName="j-user-select-modal"
      @ok="handleOk"
      destroyOnClose
      @visible-change="visibleChange"
    >
      <a-row>
        <a-col :span="showSelected ? 18 : 24">
          <BasicTable
            ref="tableRef"
            :columns="columns"
            :scroll="tableScroll"
            v-bind="getBindValue"
            :useSearchForm="true"
            :formConfig="formConfig"
            :api="listPayIfDefine"
            :searchInfo="searchInfo"
            :rowSelection="rowSelection"
            :indexColumnProps="indexColumnProps"
          >
            <!-- 一对多 选择 未显示选择条数，及清空 -->
            <template #tableTitle></template>
          </BasicTable>
        </a-col>
        <a-col :span="showSelected ? 6 : 0">
          <BasicTable
            v-bind="selectedTable"
            :dataSource="selectRows"
            :useSearchForm="true"
            :formConfig="{ showActionButtonGroup: false, baseRowStyle: { minHeight: '40px' } }"
          >
            <template #action="{ record }">
              <a href="javascript:void(0)" @click="handleDeleteSelected(record)"><Icon icon="i-ant-design:delete-outlined" /></a>
            </template>
          </BasicTable>
        </a-col>
      </a-row>
    </BasicModal>
  </div>
</template>
<script lang="ts">
  import { defineComponent, unref, ref } from "vue"
  import { BasicModal, useModalInner } from "/@/components/Modal"
  import { listPayIfDefine } from "../payIfDefine/payIfDefine.api"
  import { columns, searchFormSchema } from "../payIfDefine/payIfDefine.data"
  import { createAsyncComponent } from "/@/utils/factory/createAsyncComponent"
  import { useSelectBiz } from "/@/components/Form/src/jeecg/hooks/useSelectBiz"
  import { useAttrs } from "/@/hooks/core/useAttrs"
  import { selectProps } from "/@/components/Form/src/jeecg/props/props"
  import { Icon } from "/@/components/Icon"

  export default defineComponent({
    name: "PayIfDefineSelectModal",
    components: {
      //此处需要异步加载BasicTable
      BasicModal,
      BasicTable: createAsyncComponent(() => import("/@/components/Table/src/BasicTable.vue"), {
        loading: true,
      }),
      Icon,
    },
    props: {
      ...selectProps,
      //选择框标题
      modalTitle: {
        type: String,
        default: "支付接口",
      },
    },
    emits: ["register", "getSelectResult"],
    setup(props, { emit, refs }) {
      const tableScroll = ref<any>({ x: false })
      const tableRef = ref()
      //注册弹框
      const [register, { closeModal }] = useModalInner(() => {
        if (window.innerWidth < 900) {
          tableScroll.value = { x: 900 }
        } else {
          tableScroll.value = { x: false }
        }
        setTimeout(() => {
          if (tableRef.value) {
            tableRef.value.setSelectedRowKeys(selectValues["value"] || [])
          }
        }, 800)
      })
      const attrs = useAttrs()
      //表格配置
      const config = {
        showIndexColumn: false,
        canResize: false,
        bordered: false,
        maxSelectCount: -1,
        size: "small",
      }
      const getBindValue = Object.assign({}, unref(props), unref(attrs), config)
      const [{ rowSelection, visibleChange, selectValues, indexColumnProps, getSelectResult, handleDeleteSelected, selectRows }] = useSelectBiz(
        listPayIfDefine,
        getBindValue
      )
      const searchInfo = ref(props.params)
      const formConfig = {
        baseColProps: { lg: 12, md: 24 },
        wrapperCol: { lg: 24, md: 24 },
        actionColOptions: {
          offset: 1,
          xs: 24,
          sm: 24,
          md: 24,
          lg: 9,
          // xl: 7,
        },
        schemas: searchFormSchema,
      }
      //已选择的table信息
      const selectedTable = {
        pagination: false,
        showIndexColumn: false,
        scroll: { y: 390 },
        size: "small",
        canResize: false,
        bordered: false,
        rowKey: "id",
        columns: [
          {
            title: "用户姓名",
            dataIndex: "realname",
            width: 40,
          },
          {
            title: "操作",
            dataIndex: "action",
            align: "center",
            width: 40,
            slots: { customRender: "action" },
          },
        ],
      }
      /**
       * 确定选择
       */
      function handleOk() {
        getSelectResult((options, values) => {
          //回传选项和已选择的值
          emit("getSelectResult", options, values)
          //关闭弹窗
          closeModal()
        })
      }

      return {
        //config,
        handleOk,
        searchInfo,
        register,
        indexColumnProps,
        visibleChange,
        getBindValue,
        listPayIfDefine,
        formConfig,
        columns,
        rowSelection,
        selectRows,
        selectedTable,
        handleDeleteSelected,
        tableScroll,
        tableRef,
      }
    },
  })
</script>
